 <!--
* description: 搜索选择（含输入框）
* author: hm
* createdDate: 
-->
<template>
  <section class="cartypeQuery">
    <el-dialog
      id="cartypeq"
      v-dialogDrag
      :title="curtitle"
      :visible.sync="popupsVisible"
      width="70%"
      center
      :append-to-body="true"
      :lock-scroll="true"
      :before-close="handleClose"
    >
      <dialogHeader
        slot="title"
        :title="customTitle || curtitle"
        :style-type="$store.state.app.dialogType"
      />
      <one-table-template
        ref="multipleTable"
        :dynamic-api-config="dynamicApiConfig"
        :dynamic-buttons="hiddenBtns ? [] : dynamicButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="dynamicTableCols"
        :dynamic-form-fields="formField"
        :dynamic-table-defult-height="350"
        :dynamic-is-show-more-btn="true"
        :dynamic-page-size="10"
        :dynamic-is-show-select="showSelect"
        :dynamic-api-style="apiStyle"
        :refresh-table-key="refreshTableKey"
        :callback-obj="callbackObj"
        @hiddenColData="hiddenColData"
      />
    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import Vue from "vue";
import { forEach } from 'jszip';

export default {
  name: "rulesSet",
  components: {
    dialogHeader: () => import("@/components/dialogHeader"), // 弹窗标题,
    OneTableTemplate,
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    title: { type: String, default: "搜索选择" },
    popupsVisible: { type: Boolean, default: false },
    code: { type: String, default: "" },
    comType: { type: String, default: "" },
    codeField: { type: String, default: "" },
    popupsKey: { type: String, default: "" },
    isMul: { type: Boolean, default: true },
    validrule: {
      type: Object,
      default: () => {},
    },
  },
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ""],
      function () {
        next();
      }
    );
  },
  data() {
    const viewPageCode = this.$route.path;
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);
    return {
      hiddenBtns: this.$attrs["value-object"].hiddenBtns,
      customTitle: this.$attrs["value-object"].customTitle || "",
      showSelect: false,
      table: null,
      curSelected: null,
      selectData: {},
      clickRowsData: {},
      dynamicApiConfig: this.$attrs["value-object"].api,
      apiStyle: "restful",
      dynamicButtons:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
          : [
              {
                compKey: "btnKey1",
                type: "primary",
                size: "small",
                name: "search",
                clickEvent: () => this.queryTable(1),
                position: "component",
                text: "查询",
              },
              {
                compKey: "btnKey2",
                type: "",
                size: "small",
                name: "reset",
                // clickEvent: this.reset,
                clickEvent: this.resetOne,
                position: "component",
                text: "重置",
              },
            ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .tableComponents
          : this.$attrs["value-object"].tableComponents,
      dynamicTableCols:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length >
          0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
          : [
              {
                prop: "releaseId",
                label: "主键ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "updateControlId",
                label: "并发控制ID",
                hidden: true,
                alwaysHidden: true,
              },
              ...this.$attrs["value-object"].tableCols,
            ],
      refreshTableKey: "0",
      ruleSettingShow: false,

      curPopupsVisible: this.popupsVisible,
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.table === null ? this.foundTable() : "";
          this.handleOneSelect(selection);
          this.handleSelectionChange(selection);
        },
        onRowDbClick: (section) => {
          this.$parent.clickRowData = section;
          const oFields = this.$attrs["value-object"].oFields;
          let fieldsArr;
          if (oFields) {
            fieldsArr = oFields.split(",");
          }
          const reVal = this.$attrs["value-object"].returnField;
          const val = section[reVal.prop];
          this.$emit("update:popupsVisible", false);
          this.$parent.modelText = fieldsArr ? section[fieldsArr[1]] : val;
          this.$parent.modelCode = fieldsArr ? section[fieldsArr[0]] : val;
        },
      },

      formField: this.$utils.getFormField(
        this,
        this.$attrs["value-object"].formField,
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
    };
  },
  computed: {
    curtitle() {
      return this.title.substring(0, this.title.length - 1) + "选择";
    },
  },
  mounted() {},
  methods: {
    resetOne() {
      let a = this.$attrs["value-object"].restData;
      if (a && a.length > 0) {
        a.forEach(o=>{
          this.formField[o] = "";
        })
      } else {
        this.reset();
      }
    },
    // 查找el-table表格组件
    foundTable() {
      this.$refs.multipleTable.$children.forEach((el) => {
        el.$el.className.includes("el-table") ? (this.table = el) : "";
      });
    },
    // 返回数据处理
    sendCode() {
      // eslint-disable-next-line no-prototype-builtins
      if (this.selectData.hasOwnProperty("index")) {
        this.$parent.modelText = this.selectData.storeName;
        this.$parent.modelCode = this.selectData.storeCode;
        this.$emit("update:popupsVisible", false);
        this.table.toggleRowSelection(this.curSelected, false);
      } else {
        this.$message("还没有选择体验中心！");
      }
    },

    // 设置表格选择框 是否禁用
    // getSelectable(row, index) {
    // },

    // 设置表格单选
    handleOneSelect(selection) {
      if (selection.length === 0) {
        this.selectData = {};
        return;
      }
      const lastIndex = selection.length - 1;
      this.selectData = selection[lastIndex];
      selection.forEach((sel, idx) => {
        lastIndex !== idx
          ? this.table.toggleRowSelection(sel, false)
          : (this.curSelected = sel);
      });
    },
    handleSelectionChange(selection) {
      const btns = this.dynamicButtons.filter((o) => o.disabled !== undefined);
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0;
        btns.forEach((item) => {
          item.disabled = !isCheck;
        });
      }
    },
    handleClose() {
      this.$emit("update:popupsVisible", false);
    },
    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1;
        this.dynamicTableCols = data;
      }
    },
  },
};
</script>

<style lang="css" scoped>
>>> div.el-table__empty-block {
  height: 200px;
}
div.el-table__body-wrapper.is-scrolling-none {
  height: 200px;
}
>>> .el-table__header .el-checkbox {
  display: none;
}
>>> tr.el-table__row {
  cursor: pointer;
}
.dialog-footer {
  float: right;
}
>>> div.el-row {
  padding: 5px 0;
}
>>> .el-dialog__footer {
  overflow: hidden;
  padding: 10px 24px;
}
</style>
